<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">

<head th:replace="layouts::header"></head>
    <!--&lt;!&ndash; 必要的标签 &ndash;&gt;
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    &lt;!&ndash; Bootstrap CSS &ndash;&gt;
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>-->
<body>

  <nav th:replace="layouts::navbar"></nav>

  <div class="container">
      <h3>主面板</h3>

      <p th:text="${versionNumber}"></p>

      <hr>
      <h4>当前项目</h4>
      <div class="row">
          <div class="col-md-6">

          <table class="table table-bordered table-striped">
              <thead class="thead-dark">
              <tr>
                  <th>项目名称</th>
                  <th>项目状态</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="aProject : ${projects}">
                  <td th:text="${aProject.name}"></td>
                  <td th:text="${aProject.stage}"></td>
              </tr>
              </tbody>
          </table>
      </div>
          <div class="col-md-4">
              <canvas id="myPieChart" height="50" width="50"></canvas>

              <script>
                  let chartData = "[[${projectStatusData}]]"
              </script>

          </div>
      </div>

          <h4>当前学生</h4>
      <div class="row">
          <div class="col-md-6">
          <table class="table table-bordered table-striped">
              <thead class="thead-dark">
              <tr>
                  <th>学生姓名</th>
                  <th>微信号</th>
                  <th>项目个数</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="aStudent : ${studentProjects}">
                  <td th:text="${aStudent.name}"></td>
                  <td th:text="${aStudent.wechatId}"></td>
                  <td th:text="${aStudent.projectCount}"></td>
              </tr>
              </tbody>
          </table>
      </div>
  </div>

  </div>

<script type="text/javascript" th:src="@{js/myChart.js}"></script>

</body>

</html>